<template>
  <j-modal
    switchFullscreen
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row style="width: 100%;">
          <!--          唯一编码-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="核对码">
              <a-input :disabled="disableSubmit" placeholder="请输入核对码"
                       v-decorator="['ruleCodeOnly', { rules: [{ required: true, message: '请输入核对码' }] }]" />
            </a-form-item>
          </a-col>
<!--          规则名称-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="规则名称">
              <a-input :disabled="disableSubmit" placeholder="请输入规则名称"
                       v-decorator="['ruleName', { rules: [{ required: true, message: '请输入规则名称' }] }]" />
            </a-form-item>
          </a-col>
<!--          有效期-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="有效期">
              <a-range-picker
                format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
                :disabled="disableSubmit"
                v-decorator="['date',{rules: [{ required: true, message: '有效期' }]}]"
                @change='dateChange'
              />
            </a-form-item>
          </a-col>
<!--          状态-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="状态">
              <a-select :disabled="disableSubmit" v-decorator="['status',{rules: [{ required: true, message: '请选择状态' }]}]"  placeholder="请选择状态">
                <a-select-option value="009">
                  启用
                </a-select-option>
                <a-select-option value="003">
                  禁用
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
<!--          规则类型-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="规则类型">
              <a-select :disabled="disableSubmit" v-decorator="['ruleType',{rules: [{ required: true, message: '请选择规则类型' }]}]"  placeholder="请选择规则类型" @change='getRuleType'>
                <a-select-option :value="1">
                  首单享受
                </a-select-option>
                <a-select-option :value="2">
                  合作时间
                </a-select-option>
                <a-select-option :value="3">
                  客户等级
                </a-select-option>
                <a-select-option :value="4">
                  合作时间+客户等级
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
<!--          起运量限制-->
          <span v-if="ruleType==1">
           <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="起运量限制(吨)">
              <span  style="display: flex;align-items: center">
                    <a-input-number :disabled="disableSubmit"
                                    :min='0'
                                    placeholder="最低运量"
                                    v-decorator="['minNum',{rules: [{ required: true, message: '最低运量' }]}]"
                                    style="width:100%" />
                     <span style="margin: 0 10px">~</span>
                    <a-input-number :disabled="disableSubmit"
                                    :min='0'
                                    placeholder="最高运量"
                                    v-decorator="['maxNum',{rules: [{ required: true, message: '最高运量' }]}]"
                                    style="width:100%" />
                  </span>

            </a-form-item>
          </a-col>
          </span>
<!--          合作时间-->
          <span v-if="ruleType==2||ruleType==4">
            <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="合作时间(月)">
              <a-input-number :disabled="disableSubmit"
                              :min='0'
                              placeholder=""
                              v-decorator="['cooperateDate',{rules: [{ required: true, message: '' }]}]"
                              style="width:100%" />
            </a-form-item>
          </a-col>
          </span>
<!--          客户等级-->
          <span v-if="ruleType==3||ruleType==4">
            <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

              label="客户等级">
              <cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}"
                                 :triggerChange="true"
                                 dictCode="cust_level"
                                 v-decorator="['customerLevel',{rules: [{ required: true, message: '请选择客户等级' }]}]"
                                 placeholder="请选择客户等级"
                                 :disabled="disableSubmit"
                                 @change="(e,v)=>changeJselect('actScopeType',v)"
              />
            </a-form-item>
          </a-col>
          </span>
<!--          详细内容-->
          <a-col :md="24" :sm="24">
            <a-col :md="8" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"

                label="详细内容">
                <a-input :disabled="disableSubmit" type="textarea" :maxLength="500" placeholder="请输入详细内容"
                         v-decorator="['remarks']" />
              </a-form-item>
            </a-col>
          </a-col>
<!--          拆分规则-->
          <a-col :span="24">
            <div class='items-title' style=''>
              <span style='margin-right: 16px'>拆分规则</span>
            </div>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-col :md="8" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"

                label="下单返利金额:">
                <a-input :disabled="disableSubmit"
                                type='number'
                                :min='0'
                                placeholder=""
                                v-decorator="['amount',{rules: [{ required: true, message: '' }]}]"
                                @change='changeAmount'
                                style="width:100%" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"

                label="返利单位:">
                <a-select :disabled="disableSubmit"
                          v-decorator="['rebateUnit',{rules: [{ required: true, message: '请选择返利单位' }]}]"
                          placeholder="请选择返利单位">
                  <a-select-option :value="1">
                    金额/吨
                  </a-select-option>
                  <a-select-option :value="2">
                    金额/万元
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-col>
          <div style='padding:0 24px;' >
            <a-col :md="12" :sm="24">
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="name"
              :columns="classColumns"
              :dataSource="ruleSplitVo"
              :pagination="false"
              :loading="loading"
            >
              <template slot="ratio" slot-scope="t,record,index">
                <a-input-number v-model="t" placeholder="请输入比例"
                                :disabled="disableSubmit" :min='0' :max='1' :precision="2"
                                @change="e=>tableColChange(e,'ratio',record,index)" style='width: 100%'/>

              </template>
            </a-table>
          </a-col>
          </div>


          <!--          适用商品范围-->
          <a-col :span='24'>
            <div
              style='padding: 12px 24px;margin:12px 0;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8'>
              适用商品范围
            </div>
          </a-col>

          <a-col :span='24'>
            <a-tabs default-active-key='1'>
              <a-tab-pane key='1' tab='商品层级'>
                <div style='padding:0 24px;'>
                  <a-col :md='16' :sm='24' style='display: flex;margin-bottom: 12px'>
                    <j-select-product-type v-if='!disableSubmit' selectButtonText='新增' :inputs='false' searchIcon=''
                                           @select='typeSelect' />
                    <a-button type="primary" v-if='!disableSubmit' @click="tableDelete('typeList','typeKeys')" style="margin-left: 12px">删除</a-button>
                    <div style='margin-bottom: 12px'></div>
                  </a-col>
                  <a-col :md='12' :sm='24'>
                    <a-table
                      ref='table'
                      size='middle'
                      bordered
                      rowKey='code'
                      :columns='typeColumns'
                      :dataSource='typeList'
                      :pagination='ipagination'
                      :loading='loading'
                      :rowSelection="{selectedRowKeys: typeKeys, onChange:(keys)=>this.onSelectChangeTable(keys,'typeKeys')}"
                      :customRow="(record)=> {
                        return {
                              on: {
                              click: (event) => {
                                this.onClickRowTable(record,'typeKeys')
                                },
                              }
                        }
                        }"
                      @change="(e1,e2,e3) =>handleTableChange(e1,e2,e3,'1')"
                    >
                      <div
                        slot='filterDropdown'
                        slot-scope='{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }'
                        style='padding: 8px'
                      >
                        <a-input
                          v-ant-ref='c => (searchInput = c)'
                          :placeholder='`搜索 ${column.title}`'
                          :value='selectedKeys[0]'
                          style='width: 188px; margin-bottom: 8px; display: block;'
                          @change='e => setSelectedKeys(e.target.value ? [e.target.value] : [])'
                          @pressEnter='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        />
                        <a-button
                          type='primary'
                          icon='search'
                          size='small'
                          style='width: 90px; margin-right: 8px'
                          @click='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        >
                          搜索
                        </a-button>
                        <a-button size='small' style='width: 90px' @click='() => handleReset(clearFilters)'>
                          重置
                        </a-button>
                      </div>
                      <a-icon
                        slot='filterIcon'
                        slot-scope='filtered'
                        type='search'
                        :style="{ color: filtered ? '#108ee9' : undefined }"
                      />
                      <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                        <a @click.stop='orgDeleta(record,index,"typeList")'>删除</a>
                      </span>
                    </a-table>
                  </a-col>
                </div>
              </a-tab-pane>
              <a-tab-pane key='2' tab='商品' force-render>
                <div style='padding:0 24px;'>
                  <a-col :md='16' :sm='24' style='display: flex;margin-bottom: 12px'>
                    <j-select-product v-if='!disableSubmit' selectButtonText='新增' :inputs='false' searchIcon=''
                                      @select="(row)=>productSelect(row,'bpList',2)" />
                    <a-button type="primary" v-if='!disableSubmit' @click="tableDelete('bpList','bpKeys')" style="margin-left: 12px">删除</a-button>
                    <div style='margin-bottom: 12px'></div>
                  </a-col>
                  <a-col :md='12' :sm='24'>
                    <a-table
                      ref='table'
                      size='middle'
                      bordered
                      rowKey='code'
                      :columns='bpColumns'
                      :dataSource='bpList'
                      :pagination='ipagination2'
                      :loading='loading'
                      :rowSelection="{selectedRowKeys: bpKeys, onChange:(keys)=>this.onSelectChangeTable(keys,'bpKeys')}"
                      :customRow="(record)=> {
                        return {
                              on: {
                              click: (event) => {
                                this.onClickRowTable(record,'bpKeys')
                                },
                              }
                        }
                        }"
                      @change="(e1,e2,e3) =>handleTableChange(e1,e2,e3,'2')"
                    >
                      <div
                        slot='filterDropdown'
                        slot-scope='{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }'
                        style='padding: 8px'
                      >
                        <a-input
                          v-ant-ref='c => (searchInput = c)'
                          :placeholder='`搜索 ${column.title}`'
                          :value='selectedKeys[0]'
                          style='width: 188px; margin-bottom: 8px; display: block;'
                          @change='e => setSelectedKeys(e.target.value ? [e.target.value] : [])'
                          @pressEnter='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        />
                        <a-button
                          type='primary'
                          icon='search'
                          size='small'
                          style='width: 90px; margin-right: 8px'
                          @click='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        >
                          搜索
                        </a-button>
                        <a-button size='small' style='width: 90px' @click='() => handleReset(clearFilters)'>
                          重置
                        </a-button>
                      </div>
                      <a-icon
                        slot='filterIcon'
                        slot-scope='filtered'
                        type='search'
                        :style="{ color: filtered ? '#108ee9' : undefined }"
                      />
                      <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                        <a @click.stop='orgDeleta(record,index,"bpList")'>删除</a>
                      </span>
                    </a-table>
                  </a-col>
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-col>
          <!--          规则适用范围-->
          <a-col :span='24'>
            <div
              style='padding: 12px 24px;margin:12px 0;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8'>
              规则适用范围
            </div>
          </a-col>

          <a-col :span='24'>
            <a-tabs default-active-key='1'>
              <a-tab-pane key='1' tab='部门'>
                <div style='padding:0 24px;'>
                  <a-col :md='16' :sm='24' style='display: flex;margin-bottom: 12px'>
                    <j-select-org selectButtonText='新增' v-if='!disableSubmit' :inputs='false' searchIcon=''
                                  @select='orgSelect' />
                    <a-button type="primary" v-if='!disableSubmit' @click="tableDelete('orgList','orgKeys')" style="margin-left: 12px">删除</a-button>
                    <div style='margin-bottom: 12px'></div>
                  </a-col>
                  <a-col :md='12' :sm='24'>
                    <a-table
                      ref='table'
                      size='middle'
                      bordered
                      rowKey='code'
                      :columns='orgColumns'
                      :dataSource='orgList'
                      :pagination='ipagination3'
                      :loading='loading'
                      :rowSelection="{selectedRowKeys: orgKeys, onChange:(keys)=>this.onSelectChangeTable(keys,'orgKeys')}"
                      :customRow="(record)=> {
                        return {
                              on: {
                              click: (event) => {
                                this.onClickRowTable(record,'orgKeys')
                                },
                              }
                        }
                        }"
                      @change="(e1,e2,e3) =>handleTableChange(e1,e2,e3,'3')"
                    >
                      <div
                        slot='filterDropdown'
                        slot-scope='{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }'
                        style='padding: 8px'
                      >
                        <a-input
                          v-ant-ref='c => (searchInput = c)'
                          :placeholder='`搜索 ${column.title}`'
                          :value='selectedKeys[0]'
                          style='width: 188px; margin-bottom: 8px; display: block;'
                          @change='e => setSelectedKeys(e.target.value ? [e.target.value] : [])'
                          @pressEnter='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        />
                        <a-button
                          type='primary'
                          icon='search'
                          size='small'
                          style='width: 90px; margin-right: 8px'
                          @click='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        >
                          搜索
                        </a-button>
                        <a-button size='small' style='width: 90px' @click='() => handleReset(clearFilters)'>
                          重置
                        </a-button>
                      </div>
                      <a-icon
                        slot='filterIcon'
                        slot-scope='filtered'
                        type='search'
                        :style="{ color: filtered ? '#108ee9' : undefined }"
                      />
                      <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                        <a @click.stop='orgDeleta(record,index,"orgList")'>删除</a>
                      </span>
                    </a-table>
                  </a-col>
                </div>
              </a-tab-pane>
              <a-tab-pane key='2' tab='经销商' force-render>
                <div style='padding:0 24px;'>
                  <a-col :md='16' :sm='24' style='display: flex;margin-bottom: 12px'>
                    <j-select-cust :queryConfig='queryConfig' v-if='!disableSubmit' selectButtonText='新增'
                                   :inputs='false' searchIcon='' @select='activeSelect' />
                    <a-button type="primary" v-if='!disableSubmit' @click="tableDelete('custList','custKeys')" style="margin-left: 12px">删除</a-button>
                    <div style='margin-bottom: 12px'></div>
                  </a-col>
                  <a-col :md='12' :sm='24'>
                    <a-table
                      ref='table'
                      size='middle'
                      bordered
                      rowKey='code'
                      :columns='custColumns'
                      :dataSource='custList'
                      :pagination='ipagination4'
                      :loading='loading'
                      :rowSelection="{selectedRowKeys: custKeys, onChange:(keys)=>this.onSelectChangeTable(keys,'custKeys')}"
                      :customRow="(record)=> {
                        return {
                              on: {
                              click: (event) => {
                                this.onClickRowTable(record,'custKeys')
                                },
                              }
                        }
                        }"
                      @change="(e1,e2,e3) =>handleTableChange(e1,e2,e3,'4')"
                    >
                      <div
                        slot='filterDropdown'
                        slot-scope='{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }'
                        style='padding: 8px'
                      >
                        <a-input
                          v-ant-ref='c => (searchInput = c)'
                          :placeholder='`搜索 ${column.title}`'
                          :value='selectedKeys[0]'
                          style='width: 188px; margin-bottom: 8px; display: block;'
                          @change='e => setSelectedKeys(e.target.value ? [e.target.value] : [])'
                          @pressEnter='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        />
                        <a-button
                          type='primary'
                          icon='search'
                          size='small'
                          style='width: 90px; margin-right: 8px'
                          @click='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
                        >
                          搜索
                        </a-button>
                        <a-button size='small' style='width: 90px' @click='() => handleReset(clearFilters)'>
                          重置
                        </a-button>
                      </div>
                      <a-icon
                        slot='filterIcon'
                        slot-scope='filtered'
                        type='search'
                        :style="{ color: filtered ? '#108ee9' : undefined }"
                      />
                      <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                        <a @click.stop='orgDeleta(record,index,"custList")'>删除</a>
                      </span>
                    </a-table>
                  </a-col>
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, postAction } from '@api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
import JSelectCategories from '@comp/cn-select-popup/JSelectCategories'
import JSelectSubjects from '@comp/cn-select-popup/JSelectSubjects'
import { PageListMixin } from '@/mixins/PageListMixin'
import { ajaxGetDictItems, getDictItemsFromCache } from '@api/api'
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from 'v-viewer'
import lodash from 'lodash'
import JSelectActiveColumn from '@/components/cn-select-popup/JSelectActiveColumn'
import JSelectCust from '@/components/cn-select-popup/CnSelectCust'
import JSelectOrg from '@/components/cn-select-popup/JSelectOrg'
import JSelectProduct from '@/components/cn-select-popup/JSelectProduct'
import JSelectProductType from '@/components/cn-select-popup/JSelectProductType'




export default {
  name: 'templateModal',
  mixins: [PageListMixin],
  components: {
    JMultiSelectTag,
    JSelectCategories,
    JSelectSubjects,
    JSelectActiveColumn,
    JSelectCust,
    JSelectOrg,
    JSelectProduct,
    JSelectProductType
  },

  data() {
    return {
      title:'新增',
      disabled:false,
      taskItemsList: [],
      custList:[],
      orgList:[],
      bpList:[],
      typeList:[],
      bpKeys:[],
      custKeys:[],
      orgKeys:[],
      typeKeys:[],
      ruleType:'',
      ruleSplitVo:[
        {
          detailName:'客户活动预算',
          detailCode:1,
          ratio:0,
          splitAmount:0
        },
        {
          detailName:'随车促销政策',
          detailCode:2,
          ratio:0,
          splitAmount:0
        }
      ],
      custValue:'',
      orgColumns: [
        {
          title: '组织编码',
          align: 'center',
          dataIndex: 'code',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) =>
            record.code
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '组织名称',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      custColumns: [
        {
          title: '经销商编码',
          align: 'center',
          dataIndex: 'code',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.code
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '经销商名称',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {
            customRender: 'action'
          }
        }

      ],
      bpColumns: [
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'code',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.code
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {
            customRender: 'action'
          }
        }

      ],
      typeColumns: [
        {
          title: '商品层级编码',
          align: 'center',
          dataIndex: 'code',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.code
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '商品层级名称',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'

          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {

            customRender: 'action'
          }
        }

      ],

      classColumns:[
        {
          title: '名称',
          align: 'center',
          dataIndex: 'detailName',
        },
        {
          title: '使用比例限制（0.0）',
          align: 'center',
          dataIndex: 'ratio',
          ellipsis: true,
          width:150,
          scopedSlots: { customRender: 'ratio' }
        },
        {
          title: '拆分后金额',
          dataIndex: 'splitAmount',
          align: "left",
          width: 150,
        }

      ],

      disableSubmit: false,
      areaLinkage: '',
      area: '',
      province: '',
      city: '',
      modal: {},
      areaData: '',
      proName: '产品',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        add: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/updateLog'
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination2: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination3: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination4: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  computed: {
    queryConfig(){
      return [
        {
          key: 'customerName',
          label:'客户名称'
        },
        {
          key: 'customerNames',
          label:'客户名称批量'
        }
      ]
    }
  },
  watch: {

    ruleSplitVo:{
      deep:true,
      handler(val,old){
       let amount= this.form.getFieldValue('amount')||0
       val.map(v=>{
         v.splitAmount= Math.round((v.ratio*amount)*100)/100

       })
        this.ruleSplitVo=val
      }
    }


  },
  created() {

  },
  methods: {
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    handleTableChange(pagination, filters, sorter,key) {
      console.log(pagination,filters,sorter,key)
      if(key == '1'){
        this.ipagination = pagination
      }else if(key == '2'){
        this.ipagination2 = pagination
      }else if(key == '3'){
        this.ipagination3 = pagination
      }else if(key == '4'){
        this.ipagination4 = pagination
      }

    },
    getRuleType(e){
      this.ruleType=e
    },
    productSelect(row,name,type){
      row.map(v=>{
        let index = this[name].findIndex(item=>item.code==v.matnr)
        index==-1&&this[name].push({
          scopeType:type,
          code:v.matnr,
          name:v.maktx
        })
      })
    },
    productDelete(index,name){
      this[name].splice(index,1)
    },

    tableColChange(e, key, r,index) {
      if (e instanceof Object) {
        e = e.target.value
      }
      this.ruleSplitVo[index][key]=e
      this.ruleSplitVo.forEach((value,index1)=>{
        if(index!==index1){
          value.ratio= Math.round((1-e)*100)/100
          // console.log(~~((1-e)*100))
        }
      })

    },
    activeSelect(row){
      row.map(v=>{
        let index = this['custList'].findIndex(item=>item.code==v.erpCode)
        index==-1&&this['custList'].push({
          scopeType:'4',
          code:v.erpCode,
          name:v.customerName
        })
      })
    },


    orgSelect(row){
      let list=[]
      row.map(v=>{
        let index = this['orgList'].findIndex(item=>item.code==v.orgCode)
        index==-1&&this['orgList'].push({
          scopeType:'3',
          code:v.orgCode,
          name:v.orgName
        })
      })
    },

    typeSelect(row){
      row.map(v=>{
        let index = this['typeList'].findIndex(item=>item.code==v.typeCode)
        index==-1&&this['typeList'].push({
          code:v.typeCode,
          name:v.typeName,
          scopeType:1
        })
      })
    },

    classDeleta(index){
      this.categoriesDetailVoList.splice(index,1)
    },
    custDeleta(index){
      this.custList.splice(index,1)
    },

    orgDeleta(cord, index,key) {
      // this.orgList.splice(index,1)
      const dataSource = this[key]
      const target = dataSource.filter(item => item !== cord)
      this.$set(this, key, target)
    },
    typeDeleta(index){
      this.typeList.splice(index,1)
    },

    add() {
      this.edit({})
    }
    ,
    edit(record) {
      this.form.resetFields()
      this.custList=[]
      this.orgList=[]
      this.typeList=[]
      this.bpList=[]
      this.ruleType=''
      this.ruleSplitVo=[
        {
          detailName:'客户活动预算',
          detailCode:1,
          ratio:0,
          splitAmount:0
        },
        {
          detailName:'随车促销政策',
          detailCode:2,
          ratio:0,
          splitAmount:0
        }
      ],
      this.model = Object.assign({}, record)
      this.ruleType=this.model.ruleType||0
      this.visible = true
      if (record.createBy) {
        this.$nextTick(() => {
          this.model.date=[this.model.startDate,this.model.endDate]
          this.ruleSplitVo=this.model.ruleSplitVo
          if( this.model.ruleScopeVos&&this.model.ruleScopeVos.length>0 ){
            this.model.ruleScopeVos.map(v=>{
              if(v.scopeType==1){
                this.typeList.push(v)
              }
              if(v.scopeType==2){
                this.bpList.push(v)
              }
              if(v.scopeType==3){
                this.orgList.push(v)
              }
              if(v.scopeType==4){
                this.custList.push(v)
              }
            })
          }
          this.form.setFieldsValue(pick(this.model,['status','remarks','ruleName','minNum','maxNum','amount','date','cooperateDate','customerLevel','ruleType','ruleCodeOnly','rebateUnit']))

        })
      }
    },
    close() {
      this.visible = false
    }
    ,
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = {...this.model, ...values }
          formData.ruleScopeVos = [...this.custList, ...this.orgList,...this.bpList,...this.typeList]
          formData.ruleSplitVo =this.ruleSplitVo
          postAction(this.url.add, formData).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.close()
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(()=>{
            this.confirmLoading = false
          })
        }
      })
    }
    ,
    handleCancel() {
      this.close()
    }
    ,
    changeJselect(name,value){
      name=name.split("Code");
      if(name.length>1){
        name=name[0]+'Name'+(name[1]?name[1]:'')
        this.model[name]=value
      }
    },
    dateChange(date){
      if(!date){
        this.model.startDate=''
        this.model.endDate=''
        return
      }
      this.model.startDate=date[0]
      this.model.endDate=date[1]
    },
    selectRole(row,name,key){
      let value=row.map(v=>v[key])
      name=name.split("Code");
      if(name.length>=1){
        name=name[0]+'Name'+(name[1]?name[1]:'')
        this.model[name]=value+''
      }
    },

    changeAmount(value){
      this.ruleSplitVo.map(v=>{
        v.splitAmount= Math.round((v.ratio*value)*100)/100
      })
    },




  },
}
</script>

<style lang="less" scoped>
.items-title{
  padding: 12px 24px;
  margin:12px 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
}


.ant-transfer {
  width: 100%;
  display: flex !important;
  align-items: center;
}

.ant-transfer-operation {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}

.file-box {
  position: relative;
  opacity: 1;
}

.file-btn {
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
}

.tableImages {
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
}

.areaAdd {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .areaAdd-one {
    width: 40%;
    display: flex;
    flex-direction: column;
  }

  .areaAdd-mutiple {
    border: 1px solid black;
    width: 100%;
    min-height: 200px;
  }

  .contain-text {
    font-weight: 700;
    font-size: 18px;
  }
}
/deep/ .ant-modal-body{
  padding:24px 0px;
}

/deep/ .ant-tabs-bar{
  padding-left: 24px;
}
</style>